<html manifest=node.manifest>
<head>
  <meta charset="utf-8">
  <title>BlocklyPi</title>
  <script type="text/javascript" src="../../blockly_compressed.js"></script>
  <script type="text/javascript" src="../../c_compressed.js"></script>
  
  <!--Base libs-->
  <script type="text/javascript" src="../../libs/base&loops.js"></script>
  <script type="text/javascript" src="../../libs/logic.js"></script>
  <script type="text/javascript" src="../../libs/math.js"></script>
  <script type="text/javascript" src="../../libs/procedures.js"></script>
  <script type="text/javascript" src="../../libs/texts.js"></script>
  <script type="text/javascript" src="../../libs/variables.js"></script>
  
  <script type="text/javascript" src="../../pt/console.js"></script>
  <script type="text/javascript" src="../../pt/sensor.js"></script>
  <script type="text/javascript" src="../../pt/inout.js"></script>
  <script type="text/javascript" src="../../pt/factory.js"></script>
  
  <script type="text/javascript" src="../../msg/js/zh-hans.js"></script>
  <script type="text/javascript" src="Blob.js"></script>
  <script type="text/javascript" src="spin.js"></script>
  <script type="text/javascript" src="FileSaver.min.js"></script>
  <script type="text/javascript" src="blockly_helper.js"></script>
  
  <script>

/**
 * List of tab names.
 * @private
 */
var TABS_ = ['blocks', 'c', 'xml'];

var selected = 'blocks';

/**
 * Switch the visible pane when a tab is clicked.
 * @param {string} clickedName Name of tab clicked.
 */
function tabClick(clickedName) {
  // If the XML tab was open, save and render the content.
  if (document.getElementById('tab_xml').className == 'tabon') {
    var xmlTextarea = document.getElementById('content_xml');
    var xmlText = xmlTextarea.value;
    var xmlDom = null;
    try {
      xmlDom = Blockly.Xml.textToDom(xmlText);
    } catch (e) {
      var q =
          window.confirm('Error parsing XML:\n' + e + '\n\nAbandon changes?');
      if (!q) {
        // Leave the user on the XML tab.
        return;
      }
    }
    if (xmlDom) {
      Blockly.mainWorkspace.clear();
      Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xmlDom);
    }
  }

  if (document.getElementById('tab_blocks').className == 'tabon') {
    Blockly.mainWorkspace.setVisible(false);
  }
  // Deselect all tabs and hide all panes.
  for (var i = 0; i < TABS_.length; i++) {
    var name = TABS_[i];
    document.getElementById('tab_' + name).className = 'taboff';
    document.getElementById('content_' + name).style.visibility = 'hidden';
  }

 // Select the active tab.
  selected = clickedName;
  document.getElementById('tab_' + clickedName).className = 'tabon';
  // Show the selected pane.
  document.getElementById('content_' + clickedName).style.visibility =
      'visible';
  renderContent();
  if (clickedName == 'blocks') {
    Blockly.mainWorkspace.setVisible(true);
  }
  Blockly.fireUiEvent(window, 'resize');
}

/**
 * Populate the currently selected pane with content generated from the blocks.
 */
function renderContent() {
  var content = document.getElementById('content_' + selected);
  // Initialize the pane.
  if (content.id == 'content_blocks') {
    // If the workspace was changed by the XML tab, Firefox will have performed
    // an incomplete rendering due to Blockly being invisible.  Rerender.
    Blockly.mainWorkspace.render();
  } else if (content.id == 'content_xml') {
    var xmlTextarea = document.getElementById('content_xml');
    var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
    xmlTextarea.value = xmlText;
    xmlTextarea.focus();
  /*} else if (content.id == 'content_javascript') {
    content.innerHTML = Blockly.JavaScript.workspaceToCode();
  } else if (content.id == 'content_dart') {
    content.innerHTML = Blockly.Dart.workspaceToCode();
  } else if (content.id == 'content_python') {
    content.innerHTML = Blockly.Python.workspaceToCode();*/
  } else if (content.id == 'content_c') {
    //content.innerHTML = Blockly.c.workspaceToCode();
    var cTextarea = document.getElementById('content_c');
    cTextarea.value = Blockly.c.workspaceToCode();
    cTextarea.focus();
  }
}

/**
 * Compute the absolute coordinates and dimensions of an HTML element.
 * @param {!Element} element Element to match.
 * @return {!Object} Contains height, width, x, and y properties.
 * @private
 */
function getBBox_(element) {
  var height = element.offsetHeight;
  var width = element.offsetWidth;
  var x = 0;
  var y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  return {
    height: height,
    width: width,
    x: x,
    y: y
  };
}

/**
 * Initialize Blockly.  Called on page load.
 */
function init() {
  //window.onbeforeunload = function() {
  //  return 'Leaving this page will result in the loss of your work.';
  //};

  var container = document.getElementById('content_area');
  var onresize = function(e) {
    var bBox = getBBox_(container);
    for (var i = 0; i < TABS_.length; i++) {
      var el = document.getElementById('content_' + TABS_[i]);
      el.style.top = bBox.y + 'px';
      el.style.left = bBox.x + 'px';
      // Height and width need to be set, read back, then set again to
      // compensate for scrollbars.
      el.style.height = bBox.height + 'px';
      el.style.height = (2 * bBox.height - el.offsetHeight) + 'px';
      el.style.width = bBox.width + 'px';
      el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
    }
    // Make the 'Blocks' tab line up with the toolbox.
    if (Blockly.mainWorkspace.toolbox_.width) {
      document.getElementById('tab_blocks').style.minWidth =
          (Blockly.mainWorkspace.toolbox_.width - 38) + 'px';
          // Account for the 19 pixel margin and on each side.
    }
  };
  window.addEventListener('resize', onresize, false);

  var toolbox = document.getElementById('toolbox');
  Blockly.inject(document.getElementById('content_blocks'),
      {grid:
          {spacing: 25,
           length: 3,
           colour: '#ccc',
           snap: true},
       media: '../../media/',
       toolbox: toolbox});

  auto_save_and_restore_blocks();

  //load from url parameter (single param)
  //http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript
  var dest = unescape(location.search.replace(/^.*\=/, '')).replace(/\+/g, " ");
  if(dest){
    load_by_url(dest);
  }
}
  </script>
  <style>
    html, body {
      height: 100%;
    }
    body {
      background-color: #fff;
      font-family: sans-serif;
      margin: 0;
      overflow: hidden;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
      margin-left: 5px;
      margin-right: 5px;
    }

    /* Tabs */
    #tabRow>td {
      border: 1px solid #ccc;
    }
    td.tabon {
      border-bottom-color: #ddd !important;
      background-color: #ddd;
      padding: 5px 19px;
    }
    td.taboff {
      cursor: pointer;
      padding: 5px 19px;
    }
    td.taboff:hover {
      background-color: #eee;
    }
    td.tabmin {
      border-top-style: none !important;
      border-left-style: none !important;
      border-right-style: none !important;
    }
    td.tabmax {
      border-top-style: none !important;
      border-left-style: none !important;
      border-right-style: none !important;
      width: 99%;
      text-align: right;
    }

    table {
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      border: none;
    }
    td {
      padding: 0;
      vertical-align: top;
    }
    .content {
      visibility: hidden;
      margin: 0;
      padding: 1ex;
      position: absolute;
      direction: ltr;
    }
    pre.content {
      overflow: scroll;
    }
    #content_blocks {
      padding: 0;
    }
    .blocklySvg {
      border-top: none !important;
    }
    #content_xml {
      resize: none;
      outline: none;
      border: none;
      font-family: monospace;
      overflow: scroll;
    }
    button {
      padding: 1px 1em;
      font-size: 90%;
      border-radius: 4px;
      border: 1px solid #ddd;
      background-color: #eee;
      color: black;
    }
    button.launch {
      border: 1px solid #d43;
      background-color: #d43;
      color: white;
    }
    button:active {
      border: 1px solid blue !important;
    }
    button:hover {
      box-shadow: 2px 2px 5px #888;
    }
  </style>
</head>
<body onload="init()">
  <table height="100%" width="100%">
    <tr>
      <td>
        <h1><a>BlocklyPi</a> &gt; web-based visual programming editor for RaspBerryPi
        <small>By HGC &amp; 王逸伦 Alpha版本</small></h1>
      </td>
    </tr>
    <tr>
      <td>
        <table width="100%">
          <tr id="tabRow" height="1em">
            <td id="tab_blocks" class="tabon" onclick="tabClick('blocks')">Blocks</td>
            <td class="tabmin">&nbsp;</td>
            <!--td id="tab_javascript" class="taboff" onclick="tabClick(this.id)">JavaScript</td>
            <td class="tabmin">&nbsp;</td-->
            <!--td id="tab_dart" class="taboff" onclick="tabClick(this.id)">Dart</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_python" class="taboff" onclick="tabClick(this.id)">Python</td>
            <td class="tabmin">&nbsp;</td-->
            <td id="tab_c" class="taboff" onclick="tabClick('c')">c</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_xml" class="taboff" onclick="tabClick('xml')">XML</td>
            <td class="tabmax">
              <button onclick="discard()">清除所有</button>
              <button onclick="saveCode()">保存为C代码</button>
              <button onclick="save()">保存为XML文件</button>
              <button id="fakeload">从XML文件读取</button>
              <input type="file" id="load" style="display: none;"/>
              <!--button class="launch" onclick="runJS()">Run Program</button-->
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="99%" id="content_area"></td>
    </tr>
  </table>
  <div id="content_blocks" class="content"></div>
  <textarea id="content_c" class="content" readonly wrap="off"></textarea>
  <textarea id="content_xml" class="content" wrap="off"></textarea>

  <xml id="toolbox" style="display: none">
    <category name="逻辑">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_null"></block>
    </category>
    <category name="控制">
      <block type="base_delay">
        <value name="DELAY_TIME">
          <block type="math_number">
            <field name="NUM">1000</field>
          </block>
        </value>
      </block>
      <block type="controls_for">
        <value name="FROM">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
        <value name="TO">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
        <value name="BY">
          <block type="math_number">
            <field name="NUM">1</field>
          </block>
        </value>
      </block>
      <block type="controls_whileUntil"></block>
    </category>
    <category name="数学">
      <block type="math_number"></block>
      <block type="math_arithmetic"></block>
      <block type="math_single"></block>
      <block type="math_trig"></block>
      <block type="math_constant"></block>
    </category>
    <category name="文本">
      <block type="text"></block>
    </category>
    <category name="变量" custom="VARIABLE"></category>
    <category name="函数" custom="PROCEDURE"></category>

    <sep></sep>
    <category name="控制台">
   	  <block type="console_printf"></block>
      <block type="console_nl"></block>
      <block type="console_printf_nl"></block>
      <block type="console_vars"></block>
    </category>
    <category name="输入/输出">
      <block type="inout_highlow"></block>
      <block type="inout_digital_write"></block>
      <block type="inout_digital_read"></block>
      
      <block type="controls_if">
    	<value name="IF0">
     	  <block type="inout_digital_readHigh"></block>
   	    </value>
 	  </block>
      <block type="controls_if">
    	<value name="IF0">
     	  <block type="inout_digital_readLow"></block>
   	    </value>
 	  </block>
    </category>
    <category name="传感器">
      <block type="sensor_rang"></block>

      
    </category>
    <sep></sep>
    <category name="Factory">
      <block type="factory_include"></block>
      <block type="factory_do"></block>
    </category>
  </xml>
</body>
</html>
